<template>
  <div>
    <div class="return">
      <van-icon
        @click="returnTap"
        class="icon"
        name="arrow-left"
        style="color: #000; font-size: 18px"
      />
      <span style="color: #000; font-size: 18px">填写验证码</span>
    </div>
    <div class="msg">短信验证码已发送，请填写验证码</div>
    <div class="msglist">
      <div class="msgList1">手机号</div>
      <div class="msgList2">+86 12211111111</div>
    </div>
    <div class="msglist">
      <div class="msgList1" style="color: #000">验证码</div>
      <input
        class="msglist3"
        placeholder="情输入验证码"
        type="number"
        name=""
        id=""
      />
    </div>
    <div class="listButton">
      <van-button type="primary" size="large">提交</van-button>
    </div>
    <div class="text" @click="show = true">收不到验证码?</div>
    <van-overlay
      :show="show"
      @click="show = false"
      style="background: rgba(30, 30, 30, 0.5)"
    >
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="blockOne block1">重新获取验证码</div>
          <div class="blockOne" @click="show = false">取消</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import Return from "../../../components/return";
import { Dialog } from 'vant';
export default {
  components: {
    Return,
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    returnTap() {
      Dialog.confirm({
        title: "",
        message: "验证码短信可能略有延迟，确定返回并重新开始?",
      })
        .then(() => {
              this.$router.go(-1);
        })
        .catch(() => {
    
        });
    },
  },
};
</script>
<style scoped>
.return {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  width: 94%;
  margin-left: 3%;
  position: relative;
}
.icon {
  position: absolute;
  left: 1%;
  top: 20px;
}
.msg {
  text-align: center;
  margin: 20px 0;
}
.msglist {
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid#f5f5f5;
}
.msgList1 {
  width: 30%;
  font-size: 18px;
  color: #757575;
}
.msglist3 {
  width: 70%;
  height: 50px;
  border: none;
}
.listButton {
  width: 80%;
  margin-left: 10%;
  margin-top: 80px;
}
.text {
  text-align: center;
  margin-top: 20px;
  font-size: 15px;
  color: #5e6e8d;
}
.block {
  height: 140px;
  width: 100%;
  position: fixed;
  right: 0px;
  bottom: 0px;
  z-index: 100;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  z-index: 999;
}
.blockOne {
  height: 68px;
  width: 100%;
  text-align: center;
  line-height: 68px;
}
.block1 {
  border-bottom: 1px solid #bebebe;
}
</style>